
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	.a1{
		width: 300px;
		height: 300px;
		background: red;
		
	}
	.a2{
		width: 200px;
		height: 200px;
		background: pink;
		
	}
	.a3{
		width: 100px;
		height: 100px;
		background: blue;
		
	}
	#boss div{
		float: left;
		margin: 50px;
		border-radius: 50%
	}
</style>
<body>
	<div id="boss">
		<p>.stop阻止冒泡时间</p>
		  <div class="a1" @click.stop='add(1)'>
		  	<div class="a2" @click.stop='add(2)'>
		  		<div class="a3" @click.stop='add(3)'>
		  			
		  		</div>
		  	</div>
		  </div>
		  <p style="clear: both;"></p>

		  <p>.capture事件捕获 优先级</p>
		   <div class="a1" @click.capture='add(1)'>
		  	<div class="a2" @click.capture='add(2)'>
		  		<div class="a3" @click.capture='add(3)'>
		  			
		  		</div>
		  	</div>
		  </div>

		  <p style="clear: both;"></p>

		  <p>.self自身事件</p>
		   <div class="a1" @click='add(1)'>
		  	<div class="a2" @click='add(2)'>
		  		<div class="a3" @click.self='add(3)'>
		  			
		  		</div>
		  	</div>
		  </div>
		  <button @click.once="cli()">投票</button>

	</div>
	  <script src="vue.js"></script>
	  <script>
	  	 const app = new Vue({
	  	 	el:'#boss',
	  	 	methods:{
	  	 		add(a){
	  	 			alert(a)
	  	 		},
	  	 		cli(){
	  	 			alert('投票成功')
	  	 		}
	  	 	}
	  	 })
	  </script>
</body>
</html>